<template>
     <el-form :model="form" label-width="auto" style="padding: 10px;">
        <el-form-item label="编码">
          <el-input v-model="form.code" :disabled="action!='add'"/>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="form.name"/>
        </el-form-item>
       <el-row :gutter="20" style="line-height: 40px; vertical-align: middle">
         <el-col :span="20"> <el-divider>字段信息</el-divider></el-col>
         <el-col :span="4"><el-button icon="Plus" type="primary" @click="handleAddField" ></el-button></el-col>
       </el-row>
         <template v-for="(item,index) in form.items" :key="index">
           <el-row :gutter="20">
             <el-col :span="8">
               <el-form-item label="编码">
                 <el-input v-model="item.code"/>
               </el-form-item>
             </el-col>
             <el-col :span="8">
               <el-form-item label="名称">
                 <el-input v-model="item.name"/>
               </el-form-item>
             </el-col>
             <el-col :span="4">
               <el-form-item label="多行">
                 <el-checkbox v-model="item.multiline" :true-value="true" :false-value="false"/>
               </el-form-item>
             </el-col>
             <el-col :span="4">
               <el-button icon="Top" type="primary" link @click="handleTop(index)"/>
               <el-button icon="Minus" type="danger" link @click="handleRemoveField(index)"/>

             </el-col>
           </el-row>
         </template>
          <div style="text-align:center;margin: 10px auto;">
            <el-button type="primary" @click="handleAdd">保存</el-button>
            <el-button @click="handleCancel">取消</el-button>
          </div>
      </el-form>

</template>
<script>
    import{reactive, ref} from 'vue'
    import {add,edit} from '/http/sysconfig.js'
    export default {
        props:{
          initParams:Object
        },
        setup(props,context){
          const action = ref('edit');
            const form=reactive({
              code:'',
              name:'',
              items:[{code:'value',name:'参数值',multiline:false}],
              params:{},
            })

          const handleAdd = ()=>{
              if(action.value=='add'){
                add(form).then(res=> {
                  response(res,context)
                });
              }else{
                edit(form).then(res=> {
                  response(res,context)
                });
              }
          }


          const handleCancel = ()=>{
              context.emit('close',false)
          }


          const handleAddField = ()=>{
            form.items.push({code:'',name:''})
          }

          const handleRemoveField= (i)=>{
              if(form.items.length<=1){
                return
              }
            form.items.splice(i,1)
          }

          const handleTop = (i)=>{
              if(i<=0){
                return;
              }
            [form.items[i], form.items[i-1]] = [form.items[i-1], form.items[i]];
          }


          onMounted(()=>{
            if(props.initParams){
              Object.assign(form,props.initParams)
              action.value= 'edit'
              selectFirstRow();
            }else{
              action.value= 'add'
            }
          })


          return{
            form,handleAdd,handleCancel,action,handleAddField,handleRemoveField,handleTop
          }
        }
    }
</script>

<style scoped>
.el-form .el-select {
  width: 192px; /* 或者根据需要设置其他宽度 */
}
.vertical-radio .el-radio {
  display: block;
  margin-bottom: 10px; /* 可根据需要调整间距 */
}
.header {
  font-size: 16px;
  border-top: #f0f0f0 solid 1px;
  margin: 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
</style>